<template>
  <div class="echarts" ref="chartRef"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, ref } from "vue";

const data = ref([
  { value: 1048, name: "紫外线灯使用异常预警" },
  { value: 735, name: "餐具消毒使用异常预警" },
  { value: 653, name: "专间温湿度异常预警" },
  { value: 226, name: "冰箱温湿度异常预警" },
]); 

const chartRef = ref(null);
let myChart = null;

const initChart = () => {
  if (myChart) {
    myChart.dispose(); // 如果实例已存在，先销毁
  }
  const option = {

    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["50%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 10,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: data.value,
      },
    ],
  };

  myChart = echarts.init(chartRef.value); // 初始化 ECharts

  myChart.setOption(option);
};


onMounted(async () => {
  initChart();
});

onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
